import 'package:flutter/material.dart';

class MenuItem1 extends StatelessWidget {
  final MenuItemViewModel? data;
  final double w1 = 48.0;
  // ignore: prefer_const_constructors_in_immutables
  MenuItem1({Key? key, this.data}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: data!.onPressed,
        child: Container(
          height: w1 * 2,
          width: w1,
          alignment: Alignment.center,
          padding: EdgeInsets.only(bottom: 5),
          child: Column(
            children: <Widget>[
              Container(
                height: w1,
                width: w1,
                //color: data.col1,
                child: Center(child: this.data!.icon),
                decoration: BoxDecoration(
                  color: data!.col1,
                  borderRadius: BorderRadius.all(
                    Radius.circular(6.0),
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 6.0, bottom: 6.0),
                child: Text(
                  this.data!.title,
                  textScaleFactor: 1.0,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    fontSize: 13,
                    color: Color(0xFF333333),
                  ),
                ),
              )
            ],
          ),
        ));
  }
}

class MenuItem2 extends StatelessWidget {
  final MenuItemViewModel? data;
  final double w1 = 48.0;
  MenuItem2({Key? key, this.data}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: data!.onPressed,
        child: Container(
          height: w1 * 2,
          width: w1,
          alignment: Alignment.center,
          //padding: EdgeInsets.only(bottom: 5),
          child: Column(
            children: <Widget>[
              Container(
                height: w1,
                width: w1,
                //color: data.col1,
                child: Center(child: this.data!.icon),
                decoration: BoxDecoration(
                  color: data!.col1,
                  borderRadius: BorderRadius.all(
                    Radius.circular(6.0),
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(bottom: 6.0),
                child: Text(
                  this.data!.title,
                  textScaleFactor: 1.0,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    fontSize: 13,
                    color: Color(0xFF333333),
                  ),
                ),
              )
            ],
          ),
        ));
  }
}

class MenuItemViewModel {
  /// 图标
  final Icon icon;
  final Color col1;

  /// 标题
  final String title;
  final VoidCallback onPressed;

  const MenuItemViewModel(this.icon, this.title, this.onPressed,
      {this.col1 = Colors.blue});
}
